<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>new User Tag </title>
</head>

<body>
<h1>new User Tag </h1>
<form th:action="@{/userTag/add}" th:object="${userTag}" method="post">
  <label for="tagType">Tag Type:</label>
  <select id="tagType" name="tagType" th:onchange="updateTagNames(this.value)">
    <option value="">请选择</option>
    <option th:each="type : ${tagTypeMap.keySet()}" th:value="${type}" th:text="${type}"></option>
  </select> </br>
  <label for="tagName">Tag Name:</label>
  <select id="tagName" name="tagName" th:field="*{tagName}" required>
    <option th:each="name : ${tagNames}" th:value="${name}" th:text="${name}"></option>
  </select> </br>
  <label>TagValue:</label>
  <input type="text" th:field="*{tagValue}" required><br/>
  <label>DistinctId:</label>
  <input type="text" th:field="*{distinctId}" required><br/>
  <label>UserId:</label>
  <input type="text" th:field="*{userId}" required><br/>
  <label>Subject:</label>
  <input type="text" th:field="*{subject}" required><br/>
  <button type="submit">添加</button>
</form>

<script th:inline="javascript">
  const tagTypeMap = [[${tagTypeMap}]];

  // 更新Tag Name的可选项
  function updateTagNames(tagType) {

    const tagNames = tagTypeMap[tagType];
    const tagNameSelect = document.getElementById("tagName");
    tagNameSelect.innerHTML = "";

    for (let i = 0; i < tagNames.length; i++) {
      const option = document.createElement("option");
      option.value = tagNames[i];
      option.text = tagNames[i];
      tagNameSelect.appendChild(option);
    }
  }
  // 初始化页面时，根据默认的Tag Type更新Tag Name的可选项
  window.onload = function() {
    const defaultTagType = document.getElementById("tagType").value;
    updateTagNames(defaultTagType);
  };
</script>

</body>
</html>